<template>
   <div>
        <slot></slot>
        <div :ref="componentRef" :id="'echMap'+componentRef" :style="{height:height+'px'}"></div>
   </div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
    name:'EchMap',
    components:{},
    props:{
        componentRef:[String,Number],
        height:{
            type:Number,
            default:400
        }
    
       
    },
    watch:{
        
    },
    data(){
        return{
            map:null,
            aMap:null,
            mapId:'map'
        }
    },
    computed:{
       
    },

    created(){
       this.$eventHub.$on('updateTheme', (data)=>{
            this.setMapStyle(data.type)
        })
    },
    mounted () {
        this.$nextTick(() => {
            this.initMap()
        })
    },
    methods:{
        clearMap(){
            if(this.map){
                this.map.clearMap()
            }
            this.map=null
            this.aMap=null
        },
        initMap(){
            let that = this
            if(that.map==null){
              AMapLoader.load({
                key: "733c6d01b087356b1e271db07110e9ee",  
                version: "1.4.15",
                AMapUI: { version: '1.1',},
                plugins:['Amap.MouseTool','AMap.CircleEditor','AMap.ToolBar','AMap.Scale']
            }).then((AMap)=>{
                that.aMap = AMap
                that.map = new AMap.Map("echMap"+that.componentRef,{
                    zoom: 13
                });
                    
            }).catch(e => {
                console.log(e);
            })
            }else{
                that.map.clearMap()
            }
        },
      
    },
    destroyed(){
        this.clearMap()
    }
}
</script>